<div class="login-form-wrap">
  <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
    <nz-tabset [nzAnimated]="false">
      <nz-tab nzTitle="账户密码登录">
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入用户名!">
            <nz-input-group [nzSize]="'large'" nzPrefixIcon="user">
              <input [placeholder]="'没有账号密码直接登陆'" type="text" nz-input formControlName="userName" placeholder="用户名"/>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入密码!">
            <nz-input-group [nzSize]="'large'" nzPrefixIcon="lock">
              <input autocomplete="on" [placeholder]="'no username and password,just login'" type="password" nz-input formControlName="password" placeholder="密码"/>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
      </nz-tab>

      <nz-tab nzTitle="手机号登录">
        <nz-form-item>
          <nz-form-control nzErrorTip="请输入用户名!">
            <nz-input-group [nzSize]="'large'" nzPrefixIcon="mobile">
              <input autocomplete="on" type="text" nz-input formControlName="userName" placeholder="手机号"/>
            </nz-input-group>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item nz-row nzJustify="space-between">
          <nz-form-control nz-col nzSpan="16" nzErrorTip="请输入验证码!">
            <nz-input-group [nzSize]="'large'" nzPrefixIcon="mail">
              <input type="password" nz-input formControlName="password" placeholder="密码"/>
            </nz-input-group>
          </nz-form-control>
          <button nz-button nz-col nzSpan="7" [nzSize]="'large'" nzType="default">获取验证码</button>
        </nz-form-item>
      </nz-tab>
    </nz-tabset>
    <div nz-row class="login-form-margin">
      <div nz-col [nzSpan]="12">
        <label nz-checkbox formControlName="remember">
          <span>自动登录</span>
        </label>
      </div>
      <div nz-col [nzSpan]="12">
        <a class="login-form-forgot">忘记密码</a>
      </div>
    </div>
    <button nz-button nzSize="large" class="login-form-button login-form-margin" [nzType]="'primary'">登 录</button>
    <div class="other-way">
      <div class="other-login">
        <span>其他方式登陆</span>
        <i nz-icon nzType="alipay-circle" nzTheme="fill"></i>
        <i nz-icon nzType="taobao-circle" nzTheme="fill"></i>
        <i nz-icon nzType="weibo-circle" nzTheme="fill"></i>
      </div>
      <a routerLink="/login/register-form">注册用户</a>
    </div>
  </form>
</div>

